<!-- 根据ui设置按钮组件-查询ui规范Buttons按钮 -->
<template>
    <view  
        class="m-btn" 
        :class="[level, type]"
        :style="{
            width : width + 'px', 
            height : height + 'px', 
            borderRadius: borderRadius + 'px'}"
        @click.stop="handleBtn"
    >{{ btnText }}</view>
</template>

<script>
export default {
    name: 'mButton',
    props: {
        // 按钮级别: one一级， two二级，three三级，four四级，warn警示
        level: {
            type: String,
            default: 'one',
        },
        // 按钮状态: normal正常，active按下，loading加载， disabled禁用
        type: {
            type: String,
            default: 'normal',
        },
        // 按钮显示的文字
        btnText: {
            type: String,
            default: '按钮',
        },
        width: {
            type: Number,
            default: 343
        },
        height: {
            type: Number,
            default: 48
        }
    },
    computed:{
        borderRadius(){
            return parseInt(this.height / 2)
        }
    },
    methods:{
        handleBtn(){
            if(this.type === 'disabled') return;
            this.$emit('handleBtn')
        }
    }
};
</script>

<style lang="scss" scoped>
.m-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    font-size: 16px;
}
.one,.two,.three{
    &.active, &.loading{
        color: #be6584;
        background-color: #a42854;
    }
    &.disabled{
        color: $color-white;
        background-color: $basis-solid-grey-05;
    }
}
.one{
    &.normal{
        color: $color-white;
        background-color: $color-primary;
    }
}
.two{
    &.normal{
        color: $color-primary;
        background-color: $color-white;
        border: 1px solid $color-primary;
    }
}
.three{
    &.normal{
        color: $color-primary;
        background-color: #faeff2;
    }
}
.four{
    &.normal{
        color: $basis-solid-grey-08;
        background-color: $color-white;
        border: 1px solid $basis-solid-grey-05;
    }
    &.active{
        color: $basis-solid-grey-09;
        background-color: $basis-solid-grey-04;
    }
    &.disabled{
        color: $basis-solid-grey-05;
        background-color: $color-white;
        border: 1px solid $basis-solid-grey-05;
    }
}
.warn{
    color: $color-white;
    &.normal{
        background-color: $basis-solid-red;
    }
    &.active{
        background-color: #d03530;
    }
    &.disabled{
        background-color: #fbab8e;
    }
}
</style>
